<template>
  <div class="container">
    <div class="pixel-forest">
      <div class="tree">
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
      </div>
      <div class="tree">
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
      </div>
      <div class="tree">
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
      </div>
      <div class="tree">
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
        <div class="branch"></div>
      </div>
    </div>
    <div class="clock">{{ time }}</div>
    <div class="date">{{ date }}</div>
    <div class="snowflakes">
      <div v-for="flake in flakes" :key="flake.id" class="snowflake" :style="flake.style"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '',
      date: '',
      flakes: []
    }
  },
  mounted() {
    this.getTime();
    this.getDate();
    setInterval(() => {
      this.getTime();
      this.getDate();
    }, 1000);
    this.generateSnowflakes();
    setInterval(() => {
      this.moveSnowflakes();
    }, 50);
  },
  methods: {
    getTime() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();
      this.time = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
    },
    getDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      this.date = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
    },
    padZero(value) {
      return value < 10 ? '0' + value : value;
    },
    generateSnowflakes() {
      const snowflakes = [];
      for (let i = 0; i < 50; i++) {
        snowflakes.push({
          id: i,
          x: Math.random() * window.innerWidth,
          y: -Math.random() * window.innerHeight,
          size: Math.random() * 3 + 1,
          speedX: Math.random() * 2 - 1,
          speedY: Math.random() * 3 + 1
        });
      }
      this.flakes = snowflakes;
    },
    moveSnowflakes() {
      this.flakes.forEach(flake => {
        flake.x += flake.speedX;
        flake.y += flake.speedY;
        if (flake.y > window.innerHeight) {
          flake.y = -Math.random() * window.innerHeight;
        }
        if (flake.x > window.innerWidth) {
          flake.x = 0;
        }
        if (flake.x < 0) {
          flake.x = window.innerWidth;
        }
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #2C3E50;
}

.pixel-forest {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 90%;
  height: 300px;
  margin-bottom: 2rem;
}

.tree {
  position: relative;
  width: 40px;
  height: 80%;
  background-color: #16A085;
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.branch {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 40%;
  background-color: #2ECC71;
  border-radius: 4px 4px 0 0;
  transform: translateX(50%);
}

.branch:nth-child(1) {
  left: 10%;
}

.branch:nth-child(2) {
  left: 30%;
}

.branch:nth-child(3) {
  left: 50%;
}

.branch:nth-child(4) {
  left: 70%;
}

.clock {
  font-size: 5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #FFF;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.date {
  font-size: 2rem;
  font-weight: bold;
  color: #FFF;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.snowflakes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #FFF;
  border-radius: 50%;
  opacity: 0.7;
}

.snowflake::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #FFF;
}

.snowflake::after {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid #FFF;
}
</style>
